<template>
	<public-view navType="order" navTitle="购物车" topBgShow="4" navColor="#ffffff">
		<view class="content flex a-i-c f-d-c w-100">
			<block v-for="(item, index) in car_list" :key="index">
				<view class="item-box">
					<view class="shop flex a-i-c j-c-b w-100">
						<view class="flex a-i-c left">
							<!-- :style="{opacity:item.is_lose?'0.5':'1'}" -->
							<!-- <view class="check-box check-box-active all-center"></view> -->
							<image class="shop-icon" src="@/static/images/store-icon-7a.svg" mode=""></image>
							<view class="color-7a7a7a f-s-30 f-w-b">
								{{item.merchant.name||""}}
							</view>
						</view>
						<image class="next-ic" src="@/static/images/next-icon3.svg" mode=""></image>
					</view>
					<block v-for="(itm, idx) in item.goods" :key="idx">
						<view class="goods-box flex f-d-c">
							<view class="iscloseopacity" v-if="itm.is_lose">
								
							</view>
							<view class="goods-item flex a-i-c">
								<view class="check-box all-center" @click="changeChoose(itm,index,idx)" :class="choose_list[itm.id]?.active?'check-box-active':''"></view>
								<image class="goods-icon" :src="itm.source_data?.goods_sku_product?.image" mode=""></image>
								<view class="goods-info">
									<view class="title color-333 f-s-26 l-h-36">
										{{itm.source_data.goods.name}}
									</view>
									<view class="tags flex">
										<view class="item" v-for="(itm1,idx1) in itm.source_data.goods.tags" :key="idx1">
											{{itm1.name}}
										</view>
									</view>
									<view class="color-999 f-s-22">
										<view class="flex a-i-c" style="margin: 5rpx 0;" v-for="(itms, idxs) in itm?.source_data?.goods_sku_product?.item||[]" :key="idxs">
											规格:{{itms.name||""}}
										</view>
										<view class="">
											数量：{{itm.num||0}}份
										</view>
									</view>
									<view class="before-money color-ccc f-s-22">
										￥{{itm.source_data?.goods_sku_product?.price||0}}
									</view>
									<view class="f-s-32 color-EE8300 f-w-b money-now l-h-44">
										<text class="f-s-22 color-EE8300 f-w-4">￥</text>{{itm.source_data?.goods_sku_product?.price||0}}
									</view>
								</view>
								<view class="number-inputa">
									<view class="add-jian-box flex a-i-c" v-if="!open_config">
										<view class="add all-center color-333 f-w-b" @click="changeItemNum('pop',index,idx)">
											-
										</view>
										<view class="number-input">
											<input class="input" type="number" v-model="itm.num" :data-index="index" :data-idx="idx" @blur="changeNumber">
										</view>
										<view class="add all-center color-333 f-w-b" @click="changeItemNum('add',index,idx)">
											+
										</view>
									</view>
									<image class="sku-del" style="opacity: 1;" @click="delCarGood(itm,index,idx)" v-else src="@/static/images/sku-del.svg" mode=""></image>
								</view>
							</view>
						</view>
					</block>
				</view>
			</block>
			<view class="" style="height: 200rpx;">
				
			</view>
			<view class="bottom-all-money-box flex a-i-c j-c-b">
				<view class="left f-s-24 flex a-i-c" style="color: #9f9f9f;">
					<view class="check-box  all-center" @click="cancleAllChoose" :class="all_active?'check-box-active':''"></view>
					全选
				</view>
				<view class="right flex a-i-c">
					<view class="f-s-24 color-333">
						合计：
					</view>
					<view class="color-EE8300 f-s-40 f-w-b">
						<text class="f-s-22 f-w-4">￥</text>{{all_money||0}}
					</view>
					<view class="submit-btn all-center color-fff f-s-26" @click="goToPayOrder">
						去结算
					</view>
				</view>
			</view>
		</view>
	</public-view>
</template>

<script>
	import {goTo} from "@/nav.js"
	export default {
		data() {
			return {
				page:1,
				car_list:[],
				cart_ids:"",
				choose_list:{},
				address_info:{},
				all_money:"0"
			};
		},
		computed:{
			open_config(){
				return this.$store.state.open_config
			},
			all_active(){
				let flag = true
				for(let key in this.choose_list){
					if(!this.choose_list[key].is_lose){
						if(!this.choose_list[key].active){
							flag = false
							break
						}
					}
				}
				return flag
			}
		},
		onLoad() {
			console.log(this.open_config,"open_config")
		},
		onShow() {
			this.$getDefaultAddress((res)=>{
				this.address_info = res.data ||{id:""}
				this.getBuyCarList()
				console.log(this.address_info)
			})
		},
		onReachBottom() {
			// this.page++
			// this.getBuyCarList()
		},
		onHide() {
			console.log(this.open_config)
			if(this.open_config){
				this.$store.commit("changeOpenConfig")
			}
		},
		onUnload() {
			if(this.open_config){
				this.$store.commit("changeOpenConfig")
			}
		},
		methods:{
			changeNumber(e){
				console.log(e)
				let index = e.currentTarget.dataset.index
				let idx = e.currentTarget.dataset.idx
				let num = this.car_list[index].goods[idx].num
				let good = this.car_list[index].goods[idx]
				if(num <=good.goods_sku_product.stock){
					
				}else{
					this.car_list[index].goods[idx].num = good.goods_sku_product.stock
					uni.showToast({
						title:"商品库存不足"+num,
						icon:"none"
					})
				}
				this.refreshBuyCar(index,idx)
			},
			goToPayOrder(){
				let that = this
				let {arr,car_arr} = that.getCarData()
				if(arr.length<=0){
					uni.showToast({
						title:"未选择商品",
						icon:"none"
					})
					return
				}
				that.$store.commit("changeCarData",{arr,car_arr})
				let g_arr = []
				let i_arr = []
				for(let item of that.car_list){
					for(let itm of item.goods){
						if(that.choose_list[itm.id].active){
							i_arr.push(itm)
						}
					}
					if(i_arr.length>0){
						g_arr.push({
							merchant:item.merchant,
							goods:i_arr
						})
					}
					i_arr = []
				}
				this.$store.commit("changeCarGoods",g_arr)
				goTo({url:"/pages/order/enterOrder?type=car"})
			},
			cancleAllChoose(){
				let active = this.all_active
				if(active){
					active = false
				}else{
					active = true
				}
				console.log(active,"cancleAllChoose")
				Object.keys(this.choose_list).forEach(val=>{
					console.log(this.choose_list[val])
					if(!this.choose_list[val].is_lose){
						this.choose_list[val].active = active
					}
				})
				this.getOrderMoney()
			},
			changeChoose(item,index,idx){
				if(item.is_lose){
					uni.showToast({
						title:"商品已失效",
						icon:"none"
					})
					return
				}
				this.choose_list[item.id].active = !this.choose_list[item.id].active
				this.getOrderMoney()
			},
			getCarData(){
				let arr = []
				let car_arr = {}
				let that = this
				Object.keys(that.choose_list).map(val=>{
					if(that.choose_list[val].active && !that.choose_list[val].is_lose){
						arr.push(that.choose_list[val].id)
						car_arr[`"${that.choose_list[val].merchant_id}"`]=''
					}
				})
				return {arr,car_arr}
			},
			getOrderMoney(){
				let that = this
				let {arr,car_arr} = that.getCarData()
				that.util.postRequest({
					url:"v1/order/create",
					data:{
						type:2,
						method:"GET",
						data:{
							address_id:that.address_info.id,
							cart_ids:arr,
							remarks:car_arr
						}
					}
				}).then(res=>{
					console.log(res)
					that.all_money = res.data.amount
				})
			},
			changeItemNum(type,index,idx){
				let that = this
				let num = that.car_list[index].goods[idx].num
				let good = that.car_list[index].goods[idx]
				if(good.is_lose){
					uni.showToast({
						title:"商品已失效",
						icon:"none"
					})
					return
				}
				if( type==='add' && good.goods_sku_product.residue_stock <= 0){
					//商品剩余库存是否充足
					uni.showToast({
						title:"添加失败，商品库存不足",
						icon:"none"
					})
					return
				}
				if(type === 'add'){
					//增加商品数量
					num++
					if(num <=good.goods_sku_product.stock){
						that.car_list[index].goods[idx].num = num
						that.refreshBuyCar(index,idx)
					}else{
						uni.showToast({
							title:"商品库存不足",
							icon:"none"
						})
					}
					
				}else{
					num--
					if(num<=0){
						uni.showModal({
							titel:"温馨提示",
							content:"商品数量不能为0，是否删除该商品",
							success(res) {
								if(res.confirm){
									that.delCarGood(that.car_list[index].goods[idx],index,idx,false)
								}
							}
						})
						num = 1
						that.car_list[index].goods[idx].num = num
					}else{
						that.car_list[index].goods[idx].num = num
						that.refreshBuyCar(index,idx)
					}
				}
			},
			refreshBuyCar(index,idx,type){
				let that = this
				that.util.postRequest({
					url:"v1/cart/add",
					data:{
						goods_id:that.car_list[index].goods[idx].goods_id,
						goods_sku_product_id:that.car_list[index].goods[idx].goods_sku_product_id,
						num:that.car_list[index].goods[idx].num,
						act:"set"
					}
				}).then(res=>{
					console.log(res)
					that.getBuyCarList()
				}).catch(e=>{
					uni.showToast({
						title:e.msg||"请求失败",
						icon:"none"
					})
				})
			},
			delCarGood(item,index,idx,showModel = true){
				let that = this
				if(showModel){
					uni.showModal({
						title:"提示",
						content:"是否要删除该商品",
						success(res) {
							if(res.confirm){
								that.util.postRequest({
									url:"v1/cart/del",
									data:{
										ids:[item.id]
									}
								}).then(res=>{
									console.log(res)
									that.car_list[index].goods.splice(idx,1)
									if(that.car_list[index].goods.length<=0){
										that.car_list.splice(index,1)
									}
								})
							}
						}
					})
				}else{
					that.util.postRequest({
						url:"v1/cart/del",
						data:{
							ids:[item.id]
						}
					}).then(res=>{
						console.log(res)
						that.car_list[index].goods.splice(idx,1)
						if(that.car_list[index].goods.length<=0){
							that.car_list.splice(index,1)
						}
					})
				}
			},
			getBuyCarList(del=false){
				let that = this
				that.util.postRequest({
					url:"v1/cart/index",
				}).then(res=>{
					console.log(res,"car")
					that.car_list = res.data
					res.data.forEach((value,idx)=>{
						value.goods.forEach((val,index)=>{
							if(!!!that.choose_list[val.id]){
								that.choose_list[val.id] = {
									id:val.id,
									goods_id:val.goods_id,
									goods_sku_product_id:val.goods_sku_product_id,
									active:!val.is_lose,
									is_lose:val.is_lose,
									merchant_id:val.merchant.id
								}
							}
						})
					})
					that.getOrderMoney()
				}).catch(e=>{
					// uni.showToast({
					// 	title:"商品错误",
					// 	icon:"none"
					// })
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bottom-all-money-box{
		position: fixed;
		bottom: 0;
		width: 100%;
		background: #FFFFFF;
		z-index: 3;
		padding: 16upx 30upx 68upx;
		.right{
			.submit-btn{
				width: 178upx;
				height: 70upx;
				background: #EE8300;
				border-radius: 124upx;
				margin-left: 10upx;
			}
		}
		.left{
			
		}
	}
	.sku-del{
		width: 36upx;
		height: 36upx;
		position: relative;
		z-index: 10;
	}
	.add-jian-box{
		.number-input{
			width: 90upx;
			.input{
				width: 100%;
				text-align: center;
			}
		}
		.add{
			width: 48upx;
			height: 48upx;
			border-radius: 30upx;
			background: #F8F9FA;
		}
	}
	.number-inputa{
		position: absolute;
		bottom: 0;
		right: 0;
	}
	.item-box{
		width: 690upx;
		border-radius: 20upx;
		background: #ffffff;
		margin-bottom: 16upx;
		padding: 40upx 24upx;
		.goods-box{
			width: 100%;
			margin-top: 32upx;
			position: relative;
			.iscloseopacity{
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				background: rgba(255,255,255,0.6);
				z-index: 6;
			}
			.goods-item{
				position: relative;
				.goods-info{
					.money-now{
						
					}
					.before-money{
						margin-top: 20upx;
						text-decoration-line: line-through;
					}
					.tags{
						margin-top: 10upx;
						.item{
							border: 2upx solid #F32E2E;
							border-radius: 4upx;
							padding: 0 4upx;
							color: #F32E2E;
							font-size: 18upx;
							line-height: 26upx;
							margin-right: 10upx;
						}
					}
					.title{
						width: 396upx;
					}
				}
				.goods-icon{
					width: 160upx;
					height: 160upx;
					margin-right: 24upx;
				}
			}
		}
		.shop{
			.next-ic{
				width: 48upx;
				height: 48upx;
			}
			.left{
				.shop-icon{
					width: 40upx;
					height: 40upx;
					margin-right: 16upx;
				}
			}
		}
	}
	.check-box{
		width: 36upx;
		height: 36upx;
		border-radius: 50%;
		border: 2upx solid #9f9f9f;
		margin-right: 20upx;
	}
	.check-box-active{
		background: #EE8300;
		position: relative;
		&::after{
			content: "";
			width: 4upx;
			height: 12upx;
			background-color: #FFFFFF;
			transform: rotate(-45deg);
			position: absolute;
			left: 6upx;
		}
		&::before{
			content: '';
			width: 4upx;
			height: 20upx;
			background-color: #FFFFFF;
			transform: rotate(45deg);
			position: absolute;
			right: 10upx;
		}
	}
	.content{
		padding: 34upx 30upx;
	}
</style>
